<!--
 * @Author: ShallowInk
 * @Date: 2021-07-27 23:03:42
 * @Description: 实现添加用户生成的
 * @FilePath: \GoodsManagement\src\pages\components\AddUser.vue
-->
<template>
  <n-form :model="model" :rules="rules">
    <n-form-item path="name" label="角色名称">
      <n-input v-model:value="model.name" :on-input="onChange"></n-input>
    </n-form-item>
    <n-form-item path="desc" label="角色描述">
      <n-input v-model:value="model.desc" :on-input="onChange"></n-input>
    </n-form-item>
  </n-form>
</template>
<script lang="ts">
import { ref } from "vue";
import { NForm, NFormItem, NInput } from "naive-ui";
import { useMessage } from "naive-ui";
export default {
  components: {
    NForm,
    NFormItem,
    NInput,
  },
  setup() {
    const modelRef = ref({
      name: null,
      desc: null,
    });
    /* 不可为空 */
    const message = useMessage();
    const rules = {
      name: [
        {
          required: true,
          validator(rule, value) {
            if (!value) {
              return new Error("需要角色名");
            }
            return true;
          },
          trigger: ["input", "blur"],
        },
      ],
      ndesc: [
        {
          required: true,
          validator(rule, value) {
            if (!value) {
              return new Error("需要角色描述!");
            }
            return true;
          },
          trigger: ["input", "blur"],
        },
      ],
      
    };

    /* 关于传值 */
    const onChange = () => {
      // console.log(JSON.stringify(modelRef.value))
      /* 每次 input 值改变传值给父组件 */
      // console.log(JSON.stringify(this.model))
      sessionStorage.setItem("roleEditData", JSON.stringify(modelRef.value));
    };

    return {
      model: modelRef,
      onChange,
      rules,
    };
  },
};
</script>
<style lang=""></style>
